<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">视频统计</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <div id="classCount" style="height: 500px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <div id="teacherCount" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    {
        let classCharts = echarts.init($("#classCount")[0]);
        let teacherCharts = echarts.init($("#teacherCount")[0]);
    
        function initClassChart(data) {
            let option = {
                title: {
                    text: '各科视频统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    top: 40,
                    data: data.legendData,
                    selected: data.selected
                },
                series: [
                    {
                        name: '课程',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '55%'],
                        data: data.seriesData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            classCharts.setOption(option);
        }
        function initTeacherChart(data) {
            let option = {
                title: {
                    text: '老师视频统计',
                    left: 'center'
                },
                tooltip: {},
                xAxis: {
                    data: data.legendData
                },
                yAxis: {},
                dataZoom: [
                    {
                        type:"slider",
                        show: true,
                        startValue: 0,
                        endValue: 3
                    }
                ],
                series: [{
                    data: data.seriesData,
                    type: 'bar'
                }]
            };
            teacherCharts.setOption(option);
        }
        // initClassChart({
        //     legendData: [
        //         "java", "html", "css", "javaScript", "php", "vue"
        //     ],
        //     selected: {
        //         "java": true,
        //         "html": true,
        //         "css": true,
        //         "javaScript": false,
        //         "php": false,
        //         "vue": false
        //     },
        //     seriesData: [
        //         { name: "java", value: 0 },
        //         { name: "html", value: 0 },
        //         { name: "css", value: 0 },
        //         { name: "javaScript", value: 0 },
        //         { name: "php", value: 0 },
        //         { name: "vue", value: 0 }
        //     ],
        // });
        // initTeacherChart({
        //     legendData: [
        //         "java", "html", "css", "javaScript"
        //     ],
        //     seriesData: [
        //         { name: "java", value: 20 },
        //         { name: "html", value: 30 },
        //         { name: "css", value: 40 },
        //         { name: "javaScript", value: 50 }
        //     ],
        // });

        $.ajax({
            url: 'http://localhost/videoCourse_stu/server/selectVideoCountByCourse.php',
            dataType: 'json',
            success: function(result){
                console.log(result.data);
                let courseNameArr = [];
                let selectedData = {};
                let courseDataArr = [];

                for(let c of result.data){
                    courseNameArr.push(c.courseName);
                    selectedData[c.courseName] = c.status == 1;
                    courseDataArr.push({ name: c.courseName, value: c.count});
                }

                initClassChart({
                    legendData: courseNameArr,
                    selected: selectedData,
                    seriesData: courseDataArr
                });
            }
        });

        $.ajax({
            url: 'http://localhost/videoCourse_stu/server/selectVideoCountByTeacher.php',
            dataType: 'json',
            success: function(result){
                console.log(result.data);
                let teacherNameArr = [];
                for(let c of result.data){
                    teacherNameArr.push(c.name);
                }
                initTeacherChart({
                    legendData: teacherNameArr,
                    seriesData: result.data
                });
            }
        });
        
        window.onresize = function () {
            classCharts.resize();
            teacherCharts.resize();
    
        }
    }

</script>